<!-- 
    确定需求：
        1.全选按钮点击的时候，根据自身状态决定所有选项按钮状态
        2.点击每一个选项按钮的时候，根据所有选项按钮状态决定全选按钮状态
    布局结构：
        1.需要一个全选按钮和若干的选项按钮标签
    代码逻辑：
        1.给全选按钮绑定点击事件
            -拿到自己的选中状态
            -给所有选项按钮设置选中状态
        2.给每一个选项按钮绑定点击事件
            -判断是不是所有选项按钮都是选中的
            -根据判断结果给全选按钮设置选中状态
 -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .box{
            width: 100px;
            padding: 20px;
            border: 1px solid gray;
            margin: 30px auto;
            border-radius: 5px;
        }
        hr{
            margin: 10px 0;
        }
    </style>
</head>
<body>
    <div class="box">
        全选：<input type="checkbox"><br>
        <hr>
        <input type="checkbox">选项一<br>
        <input type="checkbox">选项二<br>
        <input type="checkbox">选项三<br>
        <input type="checkbox">选项四<br>
    </div>

    <script>
        // 1.获取元素
        var allBtn = document.querySelector('input')
        var items = document.querySelectorAll('input:nth-child(n+2)')

        console.log(allBtn)
        console.log(items)

        // 2.给全选按钮绑定事件
        allBtn.onclick = function(){
            // 2-1.拿到自己的选中状态
            var type = allBtn.checked
            console.log(type)
            // 2-2.把自己的选中状态设置给每一个选项按钮
            for(var i = 0; i < items.length; i++){
                items[i].checked = type
            }
        }

        // 3.循环给每一个选项按钮绑定点击事件
        for(var i=0;i<items.length; i++){
            // 给每一个按钮绑定点击事件
            items[i].onclick = function(){
            // 3-2.首先定义假设变量，假设所有按钮都是选中的
                var flag = true
                // 3-3.通过循环来验证我们的假设
                for(var j=0; j<items.length;j++){
                    if(items[j].checked === false){
                        flag = false
                        break
                    }
                }
                // 3-4.把我们得到的结果设置给全选按钮
                allBtn.checked = flag
            }
        }
    </script>
</body>
</html>
                <!-- 自己写的 -->
                <!-- var a= []
                a[0] = items[0].checked
                a[1] = items[1].checked
                a[2] = items[2].checked
                a[3] = items[3].checked
                console.log(a)
                if(a[0]==true && a[1]==true && a[2]==true && a[3]==true){
                    allBtn.checked = true
                }else{
                    allBtn.checked = false
                } -->
